{% extends 'project/layout.html' %}
{% block title %}
项目管理
{% endblock%}
{% block css%}
<style>
  .my{
    display: flex;
  }
  .setting{
    margin-right: 40px;
    width: 30%;
  }
  .value{
    width: 50%;
  }
  /deep/.show{
      border-left: 3px  solid red !important;
      cursor: pointer;
  }
</style>

{% endblock %}
{% block content %}
  <div class="container-fluid my">
      <div class="panel panel-default setting">
         <div class="panel-heading">个人中心</div>
        <!-- List group -->
        <ul class="list-group">
          <li class="list-group-item">我的资料</li>
          <li class="list-group-item">修改密码</li>
          <li class="list-group-item show" style="border-left: 3px  solid red;">删除项目</li>
        </ul>
      </div>

      <div class="panel panel-warning value">
        <div class="panel-heading">删除项目</div>
        <!-- List group -->
        <div class="panel-body">
          <form novalidate>
              <div class="form-group">
                <label for="projectName">项目名</label>
                <input type="text" class="form-control" id="projectName" placeholder="输入项目名" name="name">
                <span class="error" style="color: red;position: absolute;"></span>
              </div>

              <button type="button" class="btn btn-danger" id="del">删除</button>
            </form>
        </div>
      </div>
  </div>
{% endblock%}

{% block js %}
<script>
    //删除项目
    function delProject(){
        let delBtn=document.querySelector('#del')
        delBtn.addEventListener('click',async (e)=>{
            let project_name=document.querySelector('#projectName').value
            let error=document.querySelector('.error')
            if(!project_name){
                error.innerHTML = '请输入项目名'
            }
            const res =await http({
                method : 'POST',
                url:"{% url 'web:project_delete'  project_id=request.tracer.project.id %}",
                data:{name:project_name}
            })
            console.log(res)
        })
    }
    delProject()
</script>
{% endblock%}